<template>
  <view>
    <div class="box">
      <div class="row">
        <div class="col">
          <div class="label">初始信用分</div>
          <t-input-number v-model="form.regInit" />
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">信用分低于</div>
          <t-input-number v-model="form.creditPointsLt" />
          <div class="tag">禁止提现</div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">信用分低于</div>
          <t-input-number v-model="form.creditPointsTask" />
          <div class="tag">任务减半</div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">封号信用分</div>
          <t-input-number v-model="form.creditPointsClose" />
          <div class="tag">无法接任务</div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">邀请加</div>
          <t-input-number v-model="form.creditInviteUser" />
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">升级加</div>
          <t-input-number v-model="form.creditUpgradeVip" />
        </div>
      </div>
      <div class="btnBox">
        <t-button theme="primary" size="large" @click="onSubmit">立即提交</t-button>
        <t-button variant="outline" theme="default" size="large" @click="unGetSetting">重置</t-button>
      </div>
    </div>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { getSetting, addSetting, updateSetting } from '@/api/system/basicSetting/5';
import { MessagePlugin } from 'tdesign-vue-next';
interface FormDataType {
  id?: string | number | null;
  regInit: number | null; // 初始信用分
  creditPointsLt: number | null; // 信用分低于（禁止提现）
  creditPointsTask: number | null; // 信用分低于（任务减半）
  creditPointsClose: number | null; // 封号信用分（无法接任务）
  creditInviteUser: number | null; // 邀请加
  creditUpgradeVip: number | null; // 升级加
}

const INITIAL_DATA: FormDataType = {
  regInit: null,
  creditPointsLt: null,
  creditPointsTask: null,
  creditPointsClose: null,
  creditInviteUser: null,
  creditUpgradeVip: null,
};
const form = ref({ ...INITIAL_DATA });

const emit = defineEmits(['handleClickDelete']);
// 提交
const onSubmit = () => {
  emit('handleClickDelete');
};
const submit = async () => {
  try {
    const res = form.value?.id ? await updateSetting(form.value) : await addSetting(form.value);
    if (res.code === 200) {
      MessagePlugin.success('提交成功');
      unGetSetting();
    }
  } catch (error) {
    console.log(error);
  }
};

// 获取配置
const unGetSetting = async () => {
  try {
    const res = await getSetting();
    form.value = res.data ? res.data : { ...INITIAL_DATA };
  } catch (error) {
    console.log(error);
  }
};

unGetSetting();

defineExpose({
  submit,
});
</script>
<style lang="less" scoped>
.box {
  padding: 10px;

  .row {
    display: flex;
    padding: 25px 0;

    &:nth-child(2n) {
      // background-color: #f2f2f2;
    }

    .col {
      flex: 1;
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .label {
        width: 110px;
        font-size: 12px;
        text-align: right;
        word-wrap: break-word;
        word-break: break-word;
        color: #666;
      }

      .tag {
        min-width: 110px;
        font-size: 12px;
        color: #999;
      }
    }
  }

  .btnBox {
    display: flex;
    justify-content: center;
  }
}
</style>

<style class="less">
.col {
  .t-input__wrap {
    width: 240px;
    margin: 0 10px;

    & .t-input {
      height: 38px;
      font-size: 12px;
    }
  }

  .t-select__wrap {
    width: 240px;

    .t-select-input {
      width: 240px;
      height: 38px;
      font-size: 12px;
    }
  }

  .t-radio-group {
    margin: 0 10px;
  }

  .t-textarea {
    width: 400px;
    margin: 0 10px;

    .t-textarea__inner {
      width: 400px;
      font-size: 12px;
    }
  }

  .t-input-number.t-input-number--row {
    width: 240px;
    display: flex;
    align-items: center;
    padding: 0 38px;
    margin: 0 10px;

    .t-button.t-button--variant-outline.t-button--theme-default.t-button--shape-square.t-button--icon-only {
      width: 38px;
      height: 38px;
    }

    .t-input__wrap {
      min-width: 156px;
    }
  }
}
</style>
